<!DOCTYPE html>
<html>
<head>
    <script src="./jquery-1.11.0.min.js"></script>
        <meta charset="UTF-8"/>
    <title>
        vote create
    </title>
</head>
<body>
<div class="container">
    <div class = "panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label class="control-label">Topic</label>
                <input  type="text" class="col-md-4 form-control" id="topic">
            </div>
            <div class="form-group">
                <label class="control-label">Description</label>
                <input  type="text" class="col-md-4 form-control" id = "description">
            </div>
            <div class="form-group">
                <input  type="file" class="col-md-4 form-control" id = "uploadFile">
            </div>
            <div class="form-group">
                <input type="button" id = "addVote" value="上传">
            </div>
            <div class="form-group">
                <div class="preview"/>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var fileArr = [];
    var count = 0;
    var fileidArr = [];
    var enableNext = true;

    $('#uploadFile').on('change',function(event){
        console.log('change');
        var voteData = event.target.files[0];
        if(!voteData) {
            console.log('no file selectd!');
            return;
        }

        fileArr.push(voteData);
        var reader = new FileReader();
        reader.readAsDataURL(voteData);
        reader.onload = function(e) {
            var fileData = e.target.result;
            if(voteData.type.match('image') !== null) {
                $('.preview').append("<img class='itemView' width='100' margin = '1px'/> </br>");
                $('.itemView')[count].src = fileData;
            } else if(voteData.type.match('video') !== null) {
                $('.preview').append("<video class='itemView' controls='controls' width='320' preload='metadata' margin = '1px'/> </br>");
                $('.itemView')[count].src = fileData;
            }
        }
    });

    $("#addVote").on('click',function(){
        console.log('start load to qiNiu');
        uploadAll(0,function() {
            console.log('all succ');
            console.log(fileArr);
            addVote();
        },function() {
            console.log('error');
        });
    });

    function addVote() {
        var vote = {
            employee_id:-1,
            topic:$('#topic').val(),
            description:$('#description').val(),
            resource:parseResource()
        };

        $.ajax({
            url:'/infiniteus-sharefun/admin/vote/addVote',
            type:'POST',
            data:JSON.stringify(vote),
            success:function(resp) {
                console.log(resp);
            }
        });
    }

    function parseResource() {
        var resource = [];
        fileidArr.forEach(function(item){
            var obj = {};
            obj.file_name = $(item).find("file_name").text();
            obj.file_id = $(item).find('file_id').text();
            resource.push(obj);
        });
        return resource;
    }

    function uploadWaitResp(fileData,succ,error) {
        console.log('call uploadWaitResp');
        var formData = new FormData();
        formData.append("fileToUpload",fileData);
        $.ajax({
            url:'http://bsl.foreveross.com/infiniteus-sharefun/api/qiniuupload',
            type:'POST',
            processData:false,
            contentType:false,
            data:formData,
            success:succ,
            error:error
        });
    }

    function uploadAll(index,succ,error) {
        console.log('uploadAll');
        console.log('start upload, index='+index);
        if(index >= fileArr.length) {
            console.log('uploadAll all done');
            succ();
        } else {
            uploadWaitResp(fileArr[index],function(response) {
                console.log('upload done, index='+index);
                console.log(response);
                uploadWaitResp(index + 1,succ,error);
            },error);
        }
    }
</script>
</body>
</html>